<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kirsty's Introduction</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet"  href="https://fonts.googleapis.com/css?family=Tangerine">
    <script src="https://at.alicdn.com/t/font_1898573_uzazdd0l06i.js"></script>
    <link rel="shortcut icon" href="images/bluecrown.ico" type="iamge/x-icon">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1863867_uqa6tdg8a0h.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap-grid.css" rel="stylesheet">
</head>
<body>
    
    <!-- 头部 -->
    <div class="header">
        <div class="head-center">
            <span>Kirsty's Introduction</span>
            <div class="head-nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#personal">个人中心</a></li>
                    <li><a href="#hobby">个人爱好</a></li>
                    <li><a href="#homework">作品展示</a></li>
                    <li><a href="#contact">联系我</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 大banner -->
    <div class="big-banner">
        <!-- <img src="images/castle.png" alt=""> -->
        <div class="up-box">
            <img src="images/id.jpg" alt="">
            <div class="welcome">
                <span class="wel">Welcome to </span><br>
                <span class="myk1">my</span>
                <span class="myk2">Kingdom</span>
            </div>
        </div>
    </div>
    
    <!-- 中间主要部分 -->
    <div class="body">
        <!-- 绝对定位 -->
        <!-- <div class="hold">
            <a href="#">
                <div id="gotop">
                    <img src="images/gotop.png" alt="gotop">
                </div>
            </a>
        </div> -->
        <!-- 个人信息介绍 -->
        <div class="myself">
            <div class="container">
                <div class="personal-title">
                    <a href="" name="personal">Personal Center</a><br>
                    <a href="">个人中心</a>
                </div>
                <div class="buttom-block">
                    <div class="content">
                        <div id="list">
                            <img src="images/banner2.jpeg" alt="">
                            <img src="images/banner1.jpg" class="whole-picture">
                            <img src="images/banner02.jpg" alt="">
                        </div>
                        <button id="prev"></button>
                        <button id="next"></button>
                        <div id="btns">
                            <span class="current"></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    
                    <div class="describe">
                        <div class="de-left">
                            <span class="per" >个人信息</span><br>
                            <span>personal<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;information</span>
                        </div>
                        <div class="de-right">
                            <ul>
                                <li>姓名：黄颖</li>
                                <li>性别：女</li>
                                <li>出生日期：1998/08/08</li>
                                <li>专业：软件工程</li>
                                <li>籍贯：湖北省恩施州土家族苗族自治州</li>
                            </ul>
                        </div>
                    </div>
                </div>  
            </div>
            <img src="images/mermaid2.png" class="mermaid">
        </div>
        <!-- 兴趣爱好 -->
        
        <div class="hobby">
            <div class="hobby-title">
                <a href="" name="hobby">My hobby</a><br>
                <a href="" >个人爱好</a>
            </div>
            <div class="collect">
                <div class="draw">
                    <img src="images/draw.png" alt="">
                    <div class="collect-title ">
                        <div class="chinese1 ">
                            <span class="draw-title">画画</span><br>
                            <span class="more">爱好就是板绘啦，手绘完全不可以，离开手绘板就是个废物
                                <br>喜欢的画风偏古风、粉酷风，喜欢的元素很多，
                                <br>眼镜、眼罩、戒指、手套、耳坠、奇奇怪怪的头饰
                                <br>头发是我的致命点还有正脸，在下是个画侧脸杀手！</span><br>
                        </div>
                        <div  class="big-english"><span>Favorite<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Draw</span>
                        </div>
                    </div>
                </div>
                <div class="music">
                    <img src="images/mamamoo.jpg" alt="">
                    <div class="collect-title2">
                        <div class="chinese2">
                            <span class="music-title">听歌</span><br>
                            <span class="more">不带耳机会死星人，音乐是精神食粮啊
                                <br>最喜欢的组合是MAMAMOO，这几个表面歌手实际搞笑艺人
                                <br>最喜欢SEVENTEEN的歌
                            </span><br>
                        </div>
                        <div  class="big-english"><span>Enjoy<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Music</span>
                        </div>
                    </div>
                </div>
                <div class="movie">
                    <img src="images/kris.jpg" alt="">
                    <div class="collect-title3">
                        <div class="chinese3">
                            <span class="movie-title">其他</span><br>
                            <span class="more">爱好广泛，看书啊、看电影啊、写作啊，但是都有些三分钟热度
                                <br> 脑补十级选手，喜欢动手做的事，人送外号“手工公举”
                            </span><br>
                        </div>
                        <div  class="big-english"><span>Feeling<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Life</span>
                        </div>
                    </div>
                </div>
            </div>
            <img src="images/Elsa.png" class="Elsa">
        </div>
        
        <!-- 作品展示 -->
        <div class="homework">
            <div class="border-out">
                <div class="border-inner">
                    <div class="homework-title">
                        <a href="" name="homework">My work</a><br>
                        <a href="" >作品展示</a>
                    </div>
                </div>
            </div>
            <div class="homework-content">
                <!-- <img src="images/banner02.jpg" alt=""> -->
                <div class="work-row-one row">
                    <div class="work1">
                        <a href="work/work1/myFirstWeb.html" target="_blank">
                            <div>
                                <img src="images/数字1.png" alt="">
                                <span>作业一</span>
                            </div>
                        </a>
                    </div>
                    <div class="work2">
                        <a href="work/work2/Test.html" target="_blank">
                            <div>
                                <img src="images/数字2.png" alt="">
                                <span>作业二</span>
                            </div>
                        </a>
                    </div>
                    <div class="work3">
                        <a href="work/work3/GrandResources.html" target="_blank">
                            <div>
                                <img src="images/数字3.png" alt="">
                                <span>作业三</span>
                            </div>
                        </a>
                    </div>
                    <div class="work4">
                        <a href="work/work4/index.html" target="_blank">
                            <div>
                                <img src="images/数字4.png" alt="">
                                <span>作业四</span>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="work-row-two row">
                    <div class="work1">
                        <a href="work/work5/index.html" target="_blank">
                            <div>
                                <img src="images/数字5.png" alt="">
                                <span>作业五</span>
                            </div>
                        </a>
                    </div>
                    <div class="work2">
                        <a href="work/work6/index.html" target="_blank">
                            <div>
                                <img src="images/数字6.png" alt="">
                                <span>作业六</span>
                            </div>
                        </a>
                    </div>
                    <div class="work3">
                        <a href="work/work7/index.html" target="_blank">
                            <div>
                                <img src="images/数字7.png" alt="">
                                <span>作业七</span>
                            </div>
                        </a>
                    </div>
                    <div class="work4">
                        <a href="work/work8/index.html" target="_blank">
                            <div>
                                <img src="images/数字8.png" alt="">
                                <span>作业八</span>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="work-row-three row">
                    <div class="work1">
                        <a href="work/work9/index.html" target="_blank">
                            <div>
                                <img src="images/数字9.png" alt="">
                                <span>作业九</span>
                            </div>
                        </a>
                    </div>
                    <div class="work2">
                        <a href="work/work10/index.html" target="_blank">
                            <div>
                                <img src="images/数字10.png" alt="">
                                <span>作业十</span>
                            </div>
                        </a>
                    </div>
                    <div class="work3">
                        <a href="work/work11/index.html" target="_blank">
                            <div>
                                <img src="images/数字11.png" alt="">
                                <span>作业十一</span>
                            </div>
                        </a>
                    </div>
                    <div class="return">
                        <a href="#homework">
                            <div>
                                <img src="images/返回 (1).png" alt="">
                                <span>返回</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <img src="images/snowman.png" class="sleep">
            <!-- <img src="images/sleep.png" class="sleep"> -->
        </div>
        <!-- 联系我 -->
        <div class="contact">
            <div class="border">
                <div class="contact-title">
                    <span></span>
                    <a href="" name="contact">Contact Me</a><br>
                    <a href="" >联系我</a>
                    <span></span>
                </div>
                <div class="contact-logo">
                    <div class="disply">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-QQ2"></use>
                        </svg>
                        <img src="images/QQcode.png" class="qqcode">
                   </div>
                    <div class="disply ">
                        <svg class="icon tel" aria-hidden="true">
                            <use xlink:href="#icon-tubiaozhizuomoban"></use>
                        </svg>
                        <span class="tel-number">13477252597</span> 
                    </div>
                   <div class="disply">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-weixin2"></use>
                        </svg>
                        <img src="images/wxcode .png" class="wxcode">
                   </div>
                </div>
            </div>
        </div>
        <img src="images/Molise.png" class="Molise">
    </div>

    <!-- 尾部 -->
    <div class="foot">
        <div class="foot-line">
            <div class="foot-nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#personal">个人中心</a></li>
                    <li><a href="#hobby">个人爱好</a></li>
                    <li><a href="#homework">作品展示</a></li>
                    <li><a href="#contact">联系我</a></li>
                </ul>
            </div>
        </div>
        <div class="copyright">
            <span >©版权所有迪士尼 不可商用</span>
            <span> 浙ICP备0XXXXXX8</span>
            <span class="foot-left">Copyright©2020 personal Web</span>
        </div>
    </div>

    <script>
        $(function () {
            var index = 0;
            $("#next").click(function () {
                index++;
                if (index > 4) {
                    index = 0;
                }
                console.log(index);
                $("#list img").eq(index).fadeIn().siblings().fadeOut();
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            })
            $("#prev").click(function () {
                index--;
                
                if (index < 0) {
                    index = $("#list img").length-1;
                }
                console.log(index);
                $("#list img").eq(index).fadeIn().siblings().fadeOut();
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            })
            $("#btns span").click(function(){
                let  i = $(this).index();
                console.log(i);
                index = i;
                $("#list img").eq(i).fadeIn().siblings().fadeOut();
                $("#btns span").eq(i).addClass("current").siblings().removeClass("current");
            })
        })
    </script>
</body>
</html>